<template>
    <div id="charts-content"></div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import "echarts-wordcloud";
import { onMounted } from "vue";
import { jobSkill } from "../api/visualizationData";

const getWelfare = async () => {
    const res = await jobSkill();
    if (res.code === 200) {
        const seriesData = res.data.map(item => ({
            name: item.name,
            value: item.count
        }));
        console.log('Series Data:', seriesData); // 打印转换后的数据

        function DrawWordCloud() {
            const mychart = echarts.init(document.getElementById("charts-content"));
            mychart.setOption({
                series: [{
                    type: "wordCloud",
                    shape: "circle",
                    keepAspect: false,
                    left: "center",
                    top: "center",
                    width: "100%",
                    height: "100%",
                    right: null,
                    bottom: null,
                    sizeRange: [12, 60],
                    rotationRange: [-90, 90],
                    rotationStep: 45,
                    gridSize: 8,
                    drawOutOfBound: false,
                    layoutAnimation: true,
                    textStyle: {
                        fontFamily: "sans-serif",
                        fontWeight: "bold",
                        color: function () {
                            return "rgb(" + [Math.round(Math.random() * 255), Math.round(Math.random() * 255), Math.round(Math.random() * 255)].join(",") + ")";
                        },
                    },
                    emphasis: {
                        focus: "self",
                        textStyle: {
                            textShadowBlur: 2,
                            textShadowColor: "#fff",
                        },
                    },
                    data: seriesData,
                }]
            });
            // 监听窗口大小变化，重新调整ECharts实例的大小
            window.addEventListener("resize", () => {
                mychart.resize();
            });
        }
        DrawWordCloud();
    }
};

getWelfare();

onMounted(() => {
    getWelfare();
});
</script>

<style scoped lang="scss">
#charts-content {
    width: 100%;
    height: 100%;
}
</style>